<!--
*** Created by zhumin on 2021/3/8.***
*** Description: "公用的布局方案"
-->
<template>
  <div class="cmss-layout">
    <div v-if="false" v-loading.fullscreen.lock="loading">
      <router-view v-if="routerAlive"></router-view>
    </div>
    <div></div>
    <div v-loading.fullscreen.lock="loading">
      <template v-if="!loading">
        <div class="layout-header">
          <div class="layout-header-left">
            <i class="logo_title"></i>
            <span class="margin-left:30px">
              <i class="dqicon dq-caidan" @click="isCollapse = !isCollapse"></i>
            </span>
          </div>
          <div class="layout-header-right">
            <div class="right-content">
              <div style="margin-top:9px">
                <el-avatar :size="30" @error="errorHandler">
                  <img :src="avatar" />
                </el-avatar>
              </div>
              <div style="margin-left:10px">
                <el-tag>管理员</el-tag>
              </div>
            </div>
          </div>
        </div>
        <div style="dispaly:flex">
          <div class="layout-siderbar">
            <el-menu
              class="el-menu-vertical-demo"
              :default-active="currentActive"
              :collapse="isCollapse"
              @select="menuSelected"
            >
              <el-menu-item
                index="1"
                v-for="(item, ind) in navMenus"
                :index="item.path"
                :key="ind"
                v-if="item.flag"
              >
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </el-menu-item>
            </el-menu>
          </div>
          <div :class="['layout-container', !isCollapse ? 'container-left' : '']">
            <router-view></router-view>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import SiderBar from '@/components/siderbar.vue'
import SiderBarItems from '@/components/siderbarItems'
import Storage from '@/assets/js/storage.js'
import NavList from '@/assets/js/navList'
import Validator from '@/assets/js/validator.js'
import Util from '@/assets/js/util'
export default {
  created() {
    this.userInfo = Storage.get('userInfo')
    this.navMenus = [
      {
        path: '/switchValue',
        title: '开关量管理',
        icon: 'dqicon dq-xitongguanli',
        flag: true
      },
      {
        path: '/analogValue',
        title: '模拟量管理',
        icon: 'dqicon dq-kehuguanli',
        flag: true
      },
      {
        path: '/realdata',
        title: '实时数据管理',
        icon: 'dqicon dq-kehuguanli',
        flag: true
      }
    ]
  },
  mounted() {
    this.getNavPower()
    this.changeCurrentActive(this.$route.path)
  },
  components: { SiderBar, SiderBarItems },
  provide() {
    return {
      reload: this.reload
    }
  },
  watch: {
    $route(to) {
      if (this.currentActive !== to.path) {
        this.changeCurrentActive(to.path)
      }
    },
    isCollapse() {
      Storage.set('isCollapse', this.isCollapse)
      this.$store.state.login.isCollapse = this.isCollapse
    }
  },
  data() {
    return {
      userInfo: null,
      loading: false,
      navMenus: null,
      url: '/switchValue',
      isCollapse: false,
      currentActive: '',
      showPwdDialog: false,
      showUserDialog: false,
      avatar: require('@/assets/img/avatar.png')
    }
  },
  computed: {
    ...mapState({})
  },

  methods: {
    errorHandler() {
      return true
    },
    reload() {
      this.routerAlive = false
      this.$nextTick(() => {
        this.routerAlive = true
      })
    },
    getNavPower() {
      this.loading = false
    },
    changeCurrentActive(currentPath) {
      let navMenu = this.navMenus.find((item, index) => {
        if (index === 0) {
          return false
        }
        return currentPath.includes(item.path)
      })
      if (navMenu === undefined) {
        this.currentActive = this.url
      } else {
        this.currentActive = navMenu.path
      }
    },
    menuSelected(index) {
      this.currentActive = index
      this.$router.push(index)
    }
  }
}
</script>
<style lang="scss" scoped>
.layout-header {
  display: flex;
  .layout-header-left {
    width: 180px;
    border-right: 1px solid #f2f4f6;
  }
  .layout-header-right {
    width: calc(100% - 180px);

    .right-content {
      display: flex;
      float: right;
      margin-right: 20px;
    }
  }
  ::v-deep .dq-caidan {
    font-size: 20px;
    cursor: pointer;
  }
}
.container-left {
  width: calc(100% - 180px);
}
.header-right {
  float: right;
  margin-right: 20px;
  line-height: 50px;
  display: flex;
}
.el-dropdown-link {
  color: #000;
  &:hover,
  &:focus {
    color: #000;
    .el-icon-arrow-down {
      -webkit-transform: rotateX(180deg);
      transform: rotateX(180deg);
    }
  }
  &.is-active,
  &:active {
    color: #000;
    .el-icon-arrow-down {
      -webkit-transform: rotateX(180deg);
      transform: rotateX(180deg);
    }
  }
  .el-icon--right {
    margin-left: 5px;
  }
}
.el-dropdown-menu {
  text-align: center;
  min-width: 65px;
}
.el-icon-arrow-down:before {
  content: '\e790';
}
</style>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-width: 180px;
  min-height: 400px;
}
</style>
